<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小宅社区-注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="{{ static('images/logo.ico') }}"/>
    <meta name="keywords" content="小宅社区">
    <meta name="description" content="小宅社区">
    <link rel="stylesheet" href="{{ static('js/layui/css/layui.css') }}">
    <link rel="stylesheet" href="{{ static('css/global.css') }}">
    <script src="{{ static('js/layui/jquery-3.3.1.min.js') }}"></script>

</head>
<body>
<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="/">
            <img src="{{ static('images/logo.png') }}" alt="layui">
        </a>
        <ul class="layui-nav fly-nav layui-hide-xs">
            <li class="layui-nav-item layui-this">
                <a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
            </li>
            <li class="layui-nav-item">
                <a href="../case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
            </li>
        </ul>


    </div>
</div>
<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
                <li><a href="/login">登录</a></li>
                <li class="layui-this" style="color: #bf2c24">注册</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <form method="post" class="register_form_con">
                            <input type="hidden" name="csrfmiddlewaretoken" value="{ { csrf_token } }">
                            <div class="layui-form-item">
                                <label for="L_phone" class="layui-form-label">手机号</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_phone" name="phone" required lay-verify="phone"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">当做您登录时候账号</div>
                            </div>

                            <div class="layui-form-item">
                                <label for="L_vercode" class="layui-form-label">图片验证码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_vercode" name="vercode" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">
                                    <img src="" id="img" class="get_pic_code" onclick="generateImageCode()">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label for="L_vercode" class="layui-form-label">手机验证码</label>
                                <div class="layui-input-inline">
                                    <input id="image_token" hidden value="">
                                    <input type="text" id="sms_code" name="vercode" required lay-verify="required"
                                           placeholder="请输入短信验证码" autocomplete="off" class="layui-input">

                                </div>
                                <button class="layui-btn" onclick="send_sms()" id="get_sms" value="0">获取验证码
                                </button>
                                <script>
                                    var tim = document.getElementById("get_sms").value;

                                    function aaa() {
                                        var tim = document.getElementById("get_sms").value;
                                        var btnn = document.getElementById("get_sms");
                                        btnn.innerText = tim;
                                        if (tim <= 0) {
                                            btnn.innerText = "获取验证码";
                                            document.getElementById("get_sms").disabled = false;
                                        } else {
                                            btnn.innerText = tim + "  秒  ";
                                            document.getElementById("get_sms").disabled = true;
                                            tims = tim - 1;
                                            btnn.value = tims;
                                        }
                                    }

                                    setInterval("aaa()", 1000);
                                </script>
                                {#                   <button  id="get_sms1" disabled style="width: 120px; height: 37px;color: #c2c2c2;">获取验证码</button>#}
                            </div>

                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="username" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">你在本站的用户名</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_pass" class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_pass" name="pass" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_repass" class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_repass" name="repass" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" lay-filter="*" lay-submit>
                                    立即注册
                                </button>

                            </div>
                            <br>
                            <p>第三方快速登录</p>
                            <br>
                            <a href="/qq_login">
                                <a href="" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                                   class="iconfont icon-qq" title="QQ登入"></a>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </a>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="fly-footer"><p>
    <p><a href="/">回到首页</a></p>
    <p><a href="#">小宅论坛</a> 2019 &copy; <a href="#">小宅娱乐出品</a>皖ICP备19010957号-1</p>
    </p>
</div>

<script src="{{ static('js/layui/layui.js') }}"></script>
<script src="{{ static('js/layui/jwt.js') }}"></script>
<script>

    // 1. 生成一个编号
    // 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
    imageCodeId = generateUUID();

    // 2. 拼接验证码地址
    var imageCodeUrl = "/image_code?code_id=" + imageCodeId;

    // 3. 设置页面中图片验证码img标签的src属性
    $(".get_pic_code").attr("src", imageCodeUrl);
    $("#image_token").attr("value", imageCodeId);
    layui.cache.page = 'user';
    layui.cache.user = {
        username: '游客'
        , uid: -1
        , avatar: '../../res/images/avatar/00.jpg'
        , experience: 83
        , sex: '男'
    };
    layui.config({
        base: '../static/js/mods/'
    }).extend({
        fly: 'index'
    }).use('fly');
</script>

</body>
</html>

